// 从相对路径'../utils/ajax.js'文件中导入名为'ajax'的模块（通常是用于发送网络请求等功能的封装）
import {ajax} from '../utils/ajax.js'
// 导入jQuery库，一般用于方便地操作DOM元素、处理事件等，这里假设使用了jQuery来简化页面开发
import '../lib/jquery.js'

// 定义一个名为'render'的异步函数，用于渲染页面相关内容，通常是将获取到的数据展示在页面上
async function render() {
    // 从浏览器的会话存储（sessionStorage）中获取名为'id'的项，一般这里的'id'可能是用于标识某个商品的唯一编号
    let id = sessionStorage.getItem('id');
    // 如果获取到的'id'不存在（即值为假值，比如为空字符串、null等情况），说明可能是非法访问该页面
    if (!id) {
        // 弹出一个警告框，提示用户'非法访问'
        alert('非法访问');
        // 通过修改浏览器的当前页面地址（location.href），跳转到'./list.html'页面，也就是商品列表页
        return location.href = './list.html';
    }

    // 使用导入的'ajax'模块（假设其内部封装了网络请求方法）的'get'方法，发送一个GET请求到'/goods/item/${id}'这个接口地址，
    // 这里使用了模板字符串，会将变量'id'的值替换进去，以获取指定商品的详细信息。同时使用解构赋值，
    // 从返回的数据中提取出'data'属性里的'code'和'info'属性，一般'code'用于表示请求结果的状态码，'info'包含了商品的详细信息数据
    let {data: {code, info}} = await ajax.get(`/goods/item/${id}`);
    // 如果请求返回的状态码'code'不等于1（这里假设1表示请求成功的状态码），说明获取商品详情失败了
    if (code!= 1) {
        // 弹出警告框，提示用户'获取商品详情失败'
        alert('获取商品详情失败');
        // 同样跳转到商品列表页（'./list.html'），让用户回到正常的浏览界面
        return location.href = './list.html';
    }

    // 使用jQuery的选择器（'.title'）选中页面上对应的元素，并调用'text'方法，将商品信息中的'title'（商品名称）设置为该元素的文本内容，
    // 实现将商品名称展示在页面相应位置的功能
    $('.title').text(info.title);
    // 使用jQuery的选择器（'.middleimg'）选中页面上对应的图片元素，通过'attr'方法设置'src'属性，
    // 将商品信息中的'img_big_logo'（商品大图的图片路径）赋值给该属性，从而在页面上展示对应的商品图片
    $('.middleimg').attr('src', info.img_big_logo);
    // 使用jQuery的选择器（'.desc'）选中页面上对应的元素，调用'html'方法，将商品信息中的'goods_introduce'（商品详细介绍内容）
    // 以HTML格式设置为该元素的内容，这样可以展示包含格式的商品介绍信息（比如包含段落、列表等HTML标签的内容）
    $('.desc').html(info.goods_introduce);

    // 使用jQuery的选择器（'.old'）选中页面上对应的元素，调用'text'方法，将商品信息中的'price'（商品原价）设置为该元素的文本内容，
    // 在页面上展示商品原价信息
    $('.old').text(info.price);
    // 使用jQuery的选择器（'.discount'）选中页面上对应的元素，调用'text'方法，将商品信息中当前价格与原价的比值（'current_price / price'）
    // 设置为该元素的文本内容，一般用于展示商品的折扣信息（比如0.8表示8折）
    $('.discount').text(info.current_price / info.price);
    // 使用jQuery的选择器（'.curprice'）选中页面上对应的元素，调用'text'方法，将商品信息中的'current_price'（商品当前价格）
    // 设置为该元素的文本内容，在页面上展示商品当前的实际售价
    $('.curprice').text(info.current_price);
}

// 调用'render'函数，执行页面渲染相关的逻辑，开始整个页面数据展示的流程
render();